<template>
    <el-row>
        <el-col :span="12">
            <el-card>
                <el-button type="primary" style="margin: 10px;" @click="addDialogShow = true;">添加</el-button>
                <el-table :data="parklotList" stripe style="width: 100%">
                    <el-table-column prop="parkId" label="ID" width="50px" />
                    <el-table-column prop="parkName" label="停车场名称" />
                    <el-table-column prop="parkLocation" label="停车场位置" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" type="primary"
                                @click="selectByParkId(scope.row.parkId)">修改</el-button>
                            <el-popconfirm title="确认删除该停车场？" confirm-button-text="确认" cancel-button-text="取消"
                                width="200px" @confirm="deleteByParkId(scope.row.parkId)">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
    <!-- 添加停车场的对话框开始 -->
    <el-dialog v-model="addDialogShow" title="添加停车场" width="500">
        <el-form>
            <el-form-item label="停车场名称" label-width="100px">
                <el-input autocomplete="off" v-model="parklotAdd.parkName" />
            </el-form-item>
            <el-form-item label="停车场位置" label-width="100px">
                <el-input autocomplete="off" v-model="parklotAdd.parkLocation" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogShow = false">取消</el-button>
                <el-button type="primary" @click="insert">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加停车场的对话框结束 -->


    <!-- 修改停车场的对话框开始 -->
    <el-dialog v-model="updateDialogShow" title="修改停车场" width="500">
        <el-form>
            <el-form-item label="停车场名称" label-width="100px">
                <el-input autocomplete="off" v-model="parklotUpdate.parkName" />
            </el-form-item>
            <el-form-item label="停车场位置" label-width="100px">
                <el-input autocomplete="off" v-model="parklotUpdate.parkLocation" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogShow = false">取消</el-button>
                <el-button type="primary" @click="update">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 修改停车场的对话框结束 -->

</template>

<script setup>
import parklotApi from '@/api/parklotApi';
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus'

//定义被修改停车场的信息
const parklotUpdate = ref({
    parkId: 0,
    parkName: '',
    parkLocation: ''
});

//定义被添加停车场的信息
const parklotAdd = ref({
    parkName: '',
    parkLocation: ''
});


//添加模态框是否显示的状态
const addDialogShow = ref(false);
//修改模态框是否显示的状态
const updateDialogShow = ref(false);

//定义保存停车场信息的数组
const parklotList = ref([]);
//定义方法根据ID查询停车场信息
function selectByParkId(parkId) {
    parklotApi.selectByParkId(parkId)
        .then(resp => {
            parklotUpdate.value = resp.data;
            //显示对话框
            updateDialogShow.value = true;
        });
}
//定义方法实现停车场的修改
function update() {
    parklotApi.update(parklotUpdate.value)
        .then(resp => {
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                //隐藏对话框
                updateDialogShow.value = false;
                // //清空对话框中的内容
                // parklotAdd.value = {
                //     parkName: '',
                //     parkLocation: ''
                // }
                //刷新表格数据
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 1200
                });
            }
        })
};

//获取所有停车场信息
function selectAll() {
    parklotApi.selectAll()
        .then(resp => {
            //成功的回调
            parklotList.value = resp.data;
        });
}

//定义方法完成停车场添加
function insert() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中......请稍后',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    setTimeout(() => {
        loading.close()
    }, 2000)
    parklotApi.insert(parklotAdd.value)
        .then(resp => {
            loading.close();
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                //隐藏对话框
                addDialogShow.value = false;
                //清空对话框中的内容
                parklotAdd.value = {
                    parkName: '',
                    parkLocation: ''
                }
                //刷新表格数据
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 1200
                });
            }
        });
}
//根据停车场id删除
function deleteByParkId(parkId) {
    parklotApi.delete(parkId)
        .then(resp => {
            if (resp.code == 10000) {
                //弹出成功消息，刷新表格
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                selectAll();
            } else {
                //弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 1200
                });
            }
        });
}
//调用方法获取部门的信息
selectAll();
</script>

<style scoped></style>